<template>
  <div id="seller_header">
      <div class="top">
          <div class="top_left">
             <img class="avatar" :src="seller.avatar">
          </div>
          <div class="top_right">
              <div class="title">
                    <i class="brand"></i>
                    <span class="name">{{seller.name}}</span>
              </div>
              <div class="delivery">
                  <span class="info">{{seller.description}}/{{seller.deliveryTime}}</span>
              </div>
              <div class="supports" v-if="seller.supports&&seller.supports[0]">
                    <seller-icon class="icon" size="1"
                                 :type="iconType[1]"></seller-icon>
                    <span class="text" v-if="seller.supports&&seller.supports[0]">
                      {{seller.supports[0].content}}</span>
              </div>
          </div>
          <div class="btns" @click="showMask=true">
              <span class="count" v-if="seller.supports">
                {{seller.supports.length}}个</span>
              <i class="seller-keyboard_arrow_right arrow_right"></i>
          </div>
      </div>
      <div class="bottom" @click="showMask=true">
          <i class="icon"></i>
          <span class="text">
            {{seller.bulletin}}
          </span>
          <i class="seller-keyboard_arrow_right arrow_right"></i>
      </div>
      <div class="bg">
        <img :src="seller.bgImg">
      </div>
      <transition name="mask">
        <div class="mask" v-show="showMask" >
          <div class="contentWrap">
            <div class="content">
<!--              真正的遮罩-->
              <div class="title">
                <span>{{seller.name}}</span>
              </div>
              <div class="stars"></div>
              <seller-line class="line">
                <span>优惠信息</span>
              </seller-line>
              <seller-list :supports="seller.supports"></seller-list>
              <seller-line class="line">
                <span>商家公告</span>
              </seller-line>
              <p class="bulletin">
               {{seller.bulletin}}
              </p>
            </div>
          </div>
          <div class="footer">
            <i class="seller-close close" @click="showMask=false"></i>
          </div>
        </div>
      </transition>
  </div>
</template>

<script>
  import {mapState} from "vuex"
  import list from "components/list/list.vue"
  export default {
    name: "seller-header",
    data(){
      return{
        showMask:true
      }
    },
    computed:{
      // ...mapState(["仓库中state的名称"]), //组件上计算属性的名称:仓库中state的名称
      // ...mapState(["iconTypes"]),
      ...mapState(["seller","iconTypes"]),
      iconType(){
        return this.iconTypes[this.seller.supports[0].type]
      }
    },
    components:{
      "seller-list":list
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../common/stylus/mixin.styl";
  @import "../../common/stylus/extend.styl";
  #seller_header
    background rgba(7,17,27,0.1)
    position relative
    overflow hidden
    & >.top
        padding 24px 12px 18px 24px
        display flex
        position relative
        .top_left
          width 64px
          height 64px
          margin-right 16px
          .avatar
            width 100%
            height 100%
        .top_right
            color rgba(255,255,255,1)
            .title
                display flex
                align-items  center
                font-size 16px
                font-weight bold
                line-height 18px
                margin-top 2px
                margin-bottom 8px
                .brand
                    bg-image(brand)
                    background-repeat no-repeat
                    background-size 100%
                    display inline-block
                    width 30px
                    height 18px
                .name
                    margin-left 6px
              .delivery
                font-size 12px
                font-weight 200
                line-height 12px
              .info
                  zoom 1
              .supports
                  display flex
                  align-items center
                  font-size 10px
                  font-weight 200
                  line-height 12px
                  margin-top 10px
                  margin-bottom 2px
              .text
                  margin-left 4px
              icon
                  zoom 1
        .btns
            position absolute
            right 12px
            bottom 42px
            width 45px
            height 24px
            background rgba(0,0,0,0.2)
            font-size 10px
            font-weight 200px
            line-height 12px
            color rgba(255,255,255,1)
            display  flex
            justify-content space-around
            align-items center
            border-radius 10px
            .count
                zoom 1
                position relative
                left 4px
            .arrow_right
                zoom 1

    & >.bottom
          box-sizing border-box
          width 100%
          height 28px
          padding 0 26px 0  12px
          background rgba(7,17,27,.4)
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          color rgba(255,255,255,1)
          line-height 28px
          font-size 10px
          font-weight 200
          position relative
          .icon
              bg-image(bulletin)
              background-repeat no-repeat
              background-size 100%
              display inline-block
              width 22px
              height 12px
              margin-right 4px
              position relative
              top 1.5px
          .text
              zoom 1
          .arrow_right
              position absolute
              right 12px
              top 6px

    & >.bg
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        z-index -1
        filter blur(3px)
        img
          width 100%
          height 100%

    & >.mask
        position fixed
        top 0
        bottom 0
        right 0
        left 0
        z-index 9
        margin auto
        backdrop-filter blur(10px)
        background rgba(7,17,27,.8)
        overflow auto
        .contentWrap
           @extend .clearfix
           min-height 100%
           .content
              @extend .clearfix
              padding-bottom 96px
              padding-top 64px
              .title
                  font-size 16px
                  line-height 16px
                  font-weight 700px
                  color rgba(255,255,255,1)
                  text-align center
              .stars
                  height 24px
                  background #e74c3c
                  width 100%
                  margin-top 16px
                  margin-bottom 28px
              .line
                  width 80%
                  margin 0 auto
              .bulletin
                  width 80%
                  margin 0 auto
                  margin-top 24px
                  box-sizing border-box
                  padding 0 12px
                  color white
                  font-size 12px
                  line-height 24px




        .footer
           margin-top -96px
           width 100%
           height 96px
           line-height 96px
           text-align center

           .close
              color rgba(255,255,255,.5)
              font-size 32px

</style>